<template lang="pug">
.ad.pos-a(
  v-if="isShow && adItem",
  @click="hideAd",
  :class="adItem.adtype > 3 ? 'ad-right' : 'ad-middle'")
  .close.pos-a.tac(@click="hideAd")
    i.iconfont.icon-close
  .ad-content(@click='handleClick(adItem)')
    span.ad-text.pos-a 广告
    a.ad-link(:href="adItem.outlink", target="_blank")
      img(:src="adItem.full_adimg_link")
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      adShowTime: null,
      isShow: true,
      adItem: null,
      styleObj: {
        'position': 'absolute',
        'bottom': '80px',
        'right': '10px'
      }
    }
  },
  created(){
    this.adShowTime = window.$globalconfig.MODULES.VIEW_AD_POPUP_MINUTE
  },
  mounted() {
    this.$vgo.on('ad:reshow', () => {
      this.showPanoAd()
    })

    this.$nextTick(() => {
      this.showAd()
    })
  },
  computed: {
    ...mapGetters(['adData', 'panoId']),
    getAdList() {
      if (this.adData && (this.adData.pano_ad_list.length > 0 || this.adData.union_ad_list.length > 0)) {

        let adList = [...this.adData.pano_ad_list, ...this.adData.union_ad_list]
        // 随机顺序
        const arrShuffle = arr => {
          let r = arr.map(Math.random)
          return arr.sort((a, b) => r[a] - r[b])
        }
        return arrShuffle(adList)
      }
      return null
    }
  },
  methods: {
    randomTime(min, max) {
      let x = min || 15
      let y = max || 30
      let time = Math.floor(Math.random() * (y - x) + x)
      return time
    },
    showAd() {
      setTimeout(() => {
        if(this.getAdList) {
          this.adItem = this.getAdList.shift()
          // 处理图片路径
          // this.adItem.adimglink = this.adItem.adimglink.replace('s_', '')
          // if (this.adItem.adimglink && this.adItem.adimglink.indexOf('http') === -1) {
          //   this.adItem.adimglink = $globalconfig.URLS.API + this.adItem.adimglink
          // }
          
          if(this.adItem.adtype == 4) {
            this.styleObj = {
              'position': 'absolute',
              'top': '50%',
              'left': '50%',
              'right': 'auto',
              'bottom': 'auto',
              'transform': 'translate(-50%, -50%)'
            }
          }
          this.isShow = true
          const opts = {
            panoId: this.panoId, // 作品id
            adid: this.adItem.adid || this.adItem.fk_panoadid,
            adtype: this.adItem.adid ? 1 : 0
          }

          this.$store.dispatch('setAdShowTime', opts)
        }
      }, this.adShowTime * 1000)
    },
    hideAd() {
      this.isShow = false
      setTimeout(() => {
        this.showAd()
      }, this.randomTime() * 1000)
    },
    handleClick(adItem) {
      const opts = {
        panoId: this.panoId, // 作品id
        adid: this.adItem.adid || this.adItem.fk_panoadid,
        adtype: this.adItem.adid ? 1 : 0
      }
      this.$store.dispatch('setAdClickTime', opts)
    }
  }
}
</script>

<style lang="stylus">
.ad
  min-width: 300px
  max-width: 500px
  // max-height: 300px
  overflow: hidden
  background: rgba(0, 0, 0, .4)
  z-index: 10000
  .close
    right: 0
    top: 0
    width: 30px
    height: 28px
    line-height: 28px
    background-color: rgba(0, 0, 0, .5)
    z-index: 1
    i
      font-size: 20px
      color: #fff
  .ad-content
    width: 100%
    height: 100%
    .ad-text
      left: 5px
      top: 5px
      color: #fff
      font-size: 12px
    .ad-link, .ad-link img
      display: block
      width: 100%
      height: 100%
</style>
